<template>
	<view>
		<view class="comp">
			<image :src="require('../images/bj.jpg')" style="width: 100%; height: 100%"></image>
		</view>
		<view class="cardContent" v-if="hasAccount">
			<view>
				<view class="title">欢迎使用助融报告</view>
				<!-- 验证码登录 -->
				<view class="login-card1" v-if="isCode">
					<view class="row" style="margin-bottom: 40rpx">
						<uni-easyinput type="number" placeholder="请输入手机号" maxlength="11" v-model="codeLoginForm.phone">
							<template slot="left">
								<image style="width: 30rpx; height: 34rpx; margin-left: 30rpx"
									:src="require('../images/phone.png')"></image>
							</template>
						</uni-easyinput>
					</view>
					<view class="row">
						<uni-easyinput type="number" placeholder="请输入验证码" maxlength="4" v-model="codeLoginForm.code">
							<template slot="left">
								<image style="width: 30rpx; height: 34rpx; margin-left: 30rpx"
									:src="require('../images/code.png')"></image>
							</template>
							<template slot="right">
								<view :class="!btnDisabled ? 'btnStyle' : 'btnDisabledStyle'" @click="applyGetCode(0)">
									{{ code_QY }}{{ btnDisabled ? "(" + countDown + ")" : "" }}
								</view>
							</template>
						</uni-easyinput>
					</view>
					<button :loading="codeLoginLoading" class="grant" @click="codeLoginFun">
						登录
					</button>
					<!--<view class="grant" @click="codeLoginFun">登录</view>-->
				</view>
				<view class="login-card1" v-if="!isCode">
					<view class="row" style="margin-bottom: 40rpx">
						<uni-easyinput type="number" placeholder="请输入账号" maxlength="11"
							v-model="passwordLoginForm.account">
							<template slot="left">
								<image style="width: 30rpx; height: 34rpx; margin-left: 30rpx"
									:src="require('../images/phone.png')"></image>
							</template>
						</uni-easyinput>
					</view>
					<view class="row">
						<uni-easyinput placeholder="请输入密码" :type="eyeShow ? 'password' : 'text'"
							v-model="passwordLoginForm.password">
							<template slot="left">
								<image style="width: 30rpx; height: 34rpx; margin-left: 30rpx"
									:src="require('../images/psd.png')"></image>
							</template>
							<!-- <template slot="right">
								<image style="width: 30rpx; height: 15rpx; margin-right: 30rpx;"
									@click="eyeShow = !eyeShow" src="/static/water/eye.png"></image>
							</template> -->
						</uni-easyinput>
					</view>
					<button :loading="loginLoading" class="grant" @click="passwordLoginFun">
						登录
					</button>
					<!--<view class="grant" @click="passwordLoginFun">登录</view>-->
				</view>
			</view>
			<view v-if="type != 'bind'" class="footer-title">
				<view>
					<text>{{ hasAccount ? "已有账号？" : "有账号立即登录" }}</text>
					<text @click="applyMember()" style="color: #409eff">{{
						hasAccount ? "立即注册" : "有账号立即登录"
					}}</text>
				</view>
				<view @click="isCode = !isCode" style="color: #488afd">{{
					isCode ? "密码登录" : "验证码登录"
				}}</view>
			</view>
		</view>
		<view class="cardContent" v-else>
			<view>
				<view class="title">手机号登录/注册</view>
				<view class="login-card1">
					<view class="row" style="margin-bottom: 40rpx">
						<uni-easyinput type="number" placeholder="请输入手机号" maxlength="11" v-model="applyForm.phone">
							<template slot="left">
								<image style="width: 30rpx; height: 34rpx; margin-left: 30rpx"
									:src="require('../images/phone.png')"></image>
							</template>
						</uni-easyinput>
					</view>
					<view class="row" style="margin-bottom: 40rpx">
						<uni-easyinput placeholder="请输入密码" :type="eyeShow ? 'password' : 'text'"
							v-model="applyForm.password">
							<template slot="left">
								<image style="width: 30rpx; height: 34rpx; margin-left: 30rpx"
									:src="require('../images/psd.png')"></image>
							</template>
							<!-- <template slot="right">
								<image style="width: 30rpx; height: 15rpx; margin-right: 30rpx;"
									@click="eyeShow = !eyeShow" src="/static/water/eye.png"></image>
							</template> -->
						</uni-easyinput>
					</view>
					<view class="row">
						<uni-easyinput type="number" placeholder="请输入验证码" maxlength="4" v-model="applyForm.authCode">
							<template slot="left">
								<image style="width: 30rpx; height: 34rpx; margin-left: 30rpx"
									:src="require('../images/code.png')"></image>
							</template>
							<template slot="right">
								<view :class="!btnDisabled ? 'btnStyle' : 'btnDisabledStyle'" @click="applyGetCode(1)">
									获取验证码{{ btnDisabled ? "(" + countDown + ")" : "" }}
								</view>
							</template>
						</uni-easyinput>
					</view>
					<view class="grant" @click="applyFun()">立即注册</view>
					<view @click="passwordLoginType()" class="btn-cl">密码登录</view>
				</view>
			</view>
		</view>
		<view class="arrge-box">
			<checkbox-group @change="isChecked = !isChecked">
				<checkbox color="#488afd" style="transform: scale(0.7)" :checked="isChecked" shape="circle">
				</checkbox>
			</checkbox-group>
			<view class="ys">
				<text style="color: #999">请您先阅读并同意</text>
				<text @click="linkPrivacy(0)" style="color: #488afd">《用户服务协议》</text>
				<text style="color: #999">和</text>
				<text @click="linkPrivacy(1)" style="color: #488afd">《隐私政策》</text>
			</view>
		</view>


		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="popup-content">
				<view style="padding: 30rpx 0; ">
					<view style="text-align: center; font-size: 38rpx; font-weight: bold;">温馨提示</view>
					<view style="text-align: center; margin-top: 40rpx;" class="ys">
						<text style="color: #999">请先同意</text>
						<text @click="linkPrivacy(0)" style="color: #488afd">《用户服务协议》</text>
						<text style="color: #999">和</text>
						<text @click="linkPrivacy(1)" style="color: #488afd">《隐私政策》</text>
					</view>
				</view>
				<view
					style="text-align: center; display: flex; margin-top: 30rpx; border-top: 1rpx solid #eee; height: 90rpx; line-height: 90rpx;">
					<view style="width: 49%;border-right: 1rpx solid #eee;" @click="cancle">取消</view>
					<view style="width: 49%;color: #488afd" @click="closePopup()">同意</view>
				</view>
			</view>
		</uni-popup>



	</view>
</template>

<script>
import {
	H5SmsCode,
	H5LoginPhoneApi,
	accountLoginApi,
	apllyLogin,
	authBindPhoneNumber,
} from "@/api/user.js";
import store from "@/store";
import util from "@/utils/util";
import cache from "@/utils/cache";
import { loginSucessBack } from "@/utils/auth";
import residenceTime from "@/mixins/residenceTime";
import {
	saveLoginEndTime
} from "@/utils/auth.js";
export default {
	mixins: [residenceTime],
	data() {
		return {
			loginLoading: false,
			codeLoginLoading: false,
			hasAccount: true,
			isCode: true,
			codeLoginForm: {
				phone: "",
				code: "",
			},
			passwordLoginForm: {
				account: "",
				password: "",
			},
			applyForm: {
				phone: "",
				password: "",
				authCode: "",
			},
			loginType: 0,
			btnDisabled: false,
			code_QY: "获取验证码",
			countDown: 60,
			isChecked: false,
			disabled: false,
			pwddisabled: false,
			eyeShow: true,
			clickCode: false,
			timerId: null,
			type: "",
			key: "",
			flagType: null,
			textShow: "",
		};
	},
	onLoad(options) {
		this.key = options?.key;
		this.type = options?.type;
		this.flagType = options?.flagType;
		this.textShow = options?.num;
	},
	methods: {
		pageViewTrack(stayTime) {
			const route = this.$util.getCurrentRoute()
			let params = {
				Um_Key_SourcePage: route.path,
				Um_Key_Duration: stayTime,
			}
			this.$umaTrack.pageViewTrack(params)
		},
		cancle() {
			this.$refs.popup.close()
		},
		closePopup() {
			this.isChecked = true
			this.$refs.popup.close()
			if(this.isCode){
				this.applyGetCode(this.hasAccount ? 0 : 1)
			}
			
		},
		//返回到上一个页面
		backPage() { },
		// #ifdef H5
		toJSON() { },
		// #endif
		linkPrivacy(type) {
			this.$refs.popup.close()
			uni.navigateTo({
				url: "/pages/privacy/index?privacyType=" + type,
			});
		},
		//获取验证码
		applyGetCode(type) {
			const formObj = {
				0: "codeLoginForm",
				1: "applyForm",
			};
			if (!this[formObj[type]].phone) {
				return this.$util.Tips("请输入手机号");
			}
			if (this[formObj[type]].phone) {
				const reg = /^1[3-9][0-9]\d{8}$/;
				if (!reg.test(this[formObj[type]].phone)) {
					return this.$util.Tips("请输入正确的手机号");
				}
			}

			if (!this.isChecked) {
				return this.$refs.popup.open();
				// return this.$util.Tips("请先同意用户服务协议及隐私政策");
			}

			this.clickCode = true;
			if (this.btnDisabled) return;
			this.btnDisabled = true;
			H5SmsCode({
				telephone: this[formObj[type]].phone.trim(),
			})
				.then((res) => {
					if (res.code == 200) {
						this.$util.Tips("验证码已发送，请注意查收");
					} else {
						this.$util.Tips(res.msg);
					}
				})
				.finally((e) => {
					this.timerId = setInterval(() => {
						if (this.countDown > 0) {
							this.countDown--;
						} else {
							clearInterval(this.timerId);
							this.timerId = null;
							this.btnDisabled = false;
							this.countDown = 60;
							this.code_QY = "重新获取";
						}
					}, 1000);
				});

			let paramsPageClick = {
				Um_Key_ButtonName: '获取验证码',
				Um_Key_SourcePage: `登录`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		//验证码登录
		codeLoginFun() {
			if (this.codeLoginForm.phone === "" && this.codeLoginForm.code === "") {
				return this.$util.Tips("请输入手机号，验证码");
			}
			if (this.codeLoginForm.phone === "" && this.codeLoginForm.code) {
				return this.$util.Tips("请输入手机号");
			}
			if (this.codeLoginForm.phone) {
				const reg = /^1[3-9][0-9]\d{8}$/;
				if (!reg.test(this.codeLoginForm.phone)) {
					return this.$util.Tips("请输入正确的手机号");
				}
			}
			if (['H5-uat', 'H5-prod'].includes(process.env.ENV_TYPE)) {
				if (!this.clickCode) return this.$util.Tips("请先获取验证码");
			}
			if (this.codeLoginForm.phone && this.codeLoginForm.code === "") {
				return this.$util.Tips("请输入验证码");
			}
			if (!this.isChecked) {
				return this.$refs.popup.open();
				// return this.$util.Tips("请先同意用户服务协议及隐私政策");
			}
			if (this.pwddisabled) return;
			this.codeLoginLoading = true;
			let timer = setTimeout(() => {
				this.pwddisabled = false;
				clearTimeout(timer);
			}, 2000);
			if (this.type == "bind") {
				authBindPhoneNumber({
					phone: this.codeLoginForm.phone.trim(),
					captcha: this.codeLoginForm.code.trim(),
					type: "wechat",
					key: this.key,
					// spreadUid: global.spid
				})
					.then(async (phone) => {
						if (phone.code === 200) {
							store.commit("LOGIN", {
								token: phone.data.tokenHead + phone.data.token,
							});
							saveLoginEndTime(phone.data.expiresIn);
							// store.commit("SETUID", phone.data.memberId);
							await store.dispatch("USERINFO", phone.data.memberId);
							loginSucessBack()
						}
					})
					.finally(() => {
						this.codeLoginLoading = false;
					});
			} else {

				let par = cache.get('params') && JSON.parse(cache.get('params'))
				accountLoginApi({
					...this.codeLoginForm,
					sourceType: 31,
					...par
				}).then(async (res) => {
					await store.commit("LOGIN", {
						token: res.data.tokenHead + res.data.token,
					});
					await saveLoginEndTime(res.data.expiresIn);
					await this.$util.Tips("登录成功");
					await loginSucessBack()
					await store.dispatch("USERINFO");
					await this.$umaTrack.loginTrack()
				});
			}
			this.pwddisabled = true;


			let paramsPageClick = {
				Um_Key_ButtonName: '验证码登录',
				Um_Key_SourcePage: `登录`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		//密码登录
		passwordLoginFun() {
			if (
				this.passwordLoginForm.account === "" &&
				this.passwordLoginForm.password === ""
			) {
				return this.$util.Tips("请输入账号，密码");
			}
			if (
				this.passwordLoginForm.account &&
				this.passwordLoginForm.password === ""
			) {
				return this.$util.Tips("请输入密码");
			}
			if (
				this.passwordLoginForm.account === "" &&
				this.passwordLoginForm.password
			) {
				return this.$util.Tips("请输入账号");
			}
			if (!this.isChecked) {
				return this.$refs.popup.open();
				// return this.$util.Tips("请先同意用户服务协议及隐私政策");
			}
			this.loginLoading = true;
			if (this.disabled) return;
			let timer = setTimeout(() => {
				this.disabled = false;
				clearTimeout(timer);
			}, 2000);

			let par = cache.get('params') && JSON.parse(cache.get('params'))


			H5LoginPhoneApi({
				...this.passwordLoginForm,
				sourceType: 31,
				...par
			})
				.then(async (res) => {
					await store.commit("LOGIN", {
						token: res.data.tokenHead + res.data.token,
					});
					await this.$util.Tips("登录成功");
					await saveLoginEndTime(res.data.expiresIn);
					await loginSucessBack()
					await store.dispatch("USERINFO");
					await this.$umaTrack.loginTrack()
				})
				.finally(() => {
					this.loginLoading = false;
				});
			this.disabled = true;
			let paramsPageClick = {
				Um_Key_ButtonName: '密码登录',
				Um_Key_SourcePage: `登录`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		applyMember() {
			this.hasAccount = !this.hasAccount;
			clearInterval(this.timerId);
			this.timerId = null;
			this.btnDisabled = false;
			this.countDown = 60;
		},
		applyFun() {
			if (
				this.applyForm.phone === "" ||
				this.applyForm.password === "" ||
				this.applyForm.code === ""
			) {
				return this.$util.Tips("请输入手机号，密码, 验证码");
			}
			if (!this.isChecked) {
				return this.$util.Tips("请先同意用户服务协议及隐私政策");
			}
			let par = cache.get('params') && JSON.parse(cache.get('params'))
			apllyLogin({
				...this.applyForm,
				username: this.applyForm.phone,
				sourceType: 31,
				...par
			}).then((res) => {



				this.$util.Tips('注册成功,请登录');
				setTimeout(() => {
					this.applyForm.phone = ""; //清除信息
					this.applyForm.password = ""; //清除信息
					this.ispassword = true;
					this.hasAccount = !this.hasAccount;
					this.btnDisabled = false
					this.countDown = 60;
				}, 500)

			});

			let paramsPageClick = {
				Um_Key_ButtonName: '注册',
				Um_Key_SourcePage: `登录`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		passwordLoginType() {
			this.hasAccount = !this.hasAccount;
		},
	},
};
</script>

<style lang="scss" scoped>
.comp {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}

.btn-cl {
	text-align: center;
	font-size: 26rpx;
	margin-top: 30rpx;
	color: #488afd;
}

// #ifdef MP-TOUTIAO
.row {
	display: block !important;
}

// #endif

.grant {
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 26rpx;
	border-radius: 15rpx;
	color: #fff;
	background: linear-gradient(90deg, #488afd 0%, #3f9bf9 100%);
	overflow: hidden;
	padding: 0;
	margin-top: 60rpx;
	text-align: center;
	letter-spacing: 4rpx;
}

.btnDisabledStyle {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 20rpx;
	background: #cccccc;
	cursor: not-allowed;
	border: none;
	color: white;
	text-align: center;
	border-radius: 0 10rpx 10rpx 0;
}

.btnStyle {
	width: 160rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 20rpx;
	background: #488afd;
	border: none;
	color: white;
	text-align: center;
	border-radius: 0 10rpx 10rpx 0;
}

.cardContent {
	width: 80%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -80%);

	.title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}
}

.login-card1 {
	margin-top: 80rpx;
}

.footer-title {
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/deep/ .is-input-border {
	border: none;
}

/deep/ .uni-easyinput {
	height: 80rpx;
	border-radius: 40rpx;
	overflow: hidden;
	border: none;
}

/deep/ .uni-easyinput__content {
	height: 100%;
}

.arrge-box {
	font-size: 24rpx;
	color: #555;
	padding: 0 24rpx;
	margin-top: 25rpx;
	display: flex;
	position: fixed;
	bottom: 80rpx;
	width: 660rpx;
	left: 50%;
	transform: translateX(-50%);

	/* align-items: center; */
	text {
		font-size: 24rpx;
		line-height: 50rpx;
	}

	radio-group,
	checkbox-group {
		width: auto;
	}
}



.popup-content {
	//   display: flex;
	//   flex-direction: column;
	//   align-items: center;
	//   justify-content: center;
	// padding: 15px;
	height: 310rpx;
	background-color: #fff;
	//   text-align: center;
	width: 590rpx;
	margin: 0 auto;
	border-radius: 12rpx;
	overflow: hidden;
	position: relative;
	z-index: 999;
	color: #000;
}

/deep/ .uni-popup .uni-popup__wrapper {
	border-radius: 20rpx !important;
	overflow: hidden !important;
}
</style>